---
import type { Props } from '@astrojs/starlight/props';
import '@astrojs/starlight/style/markdown.css';
import BackendGuidesNav from '../BackendGuidesNav.astro';
import CMSGuidesNav from '../CMSGuidesNav.astro';
import DeployGuidesNav from '../DeployGuidesNav.astro';
import IntegrationsNav from '../IntegrationsNav.astro';
import MigrationGuidesNav from '../MigrationGuidesNav.astro';
import { getPageCategory } from '~/util/getPageCategory';
import { useTranslations } from '~/i18n/util';

const t = useTranslations(Astro);

const { entry } = Astro.props;
---

<div class="sl-markdown-content">
	<slot />

	{
		entry.data.type === 'backend' && (
			<>
				<h2>{t('backend.navTitle')}</h2>
				<BackendGuidesNav minimal={true} />
			</>
		)
	}
	{
		entry.data.type === 'cms' && (
			<>
				<h2>{t('cms.navTitle')}</h2>
				<CMSGuidesNav minimal={true} />
			</>
		)
	}
	{
		entry.data.type === 'deploy' && (
			<>
				<h2>{t('deploy.altSectionTitle')}</h2>
				<DeployGuidesNav minimal={true} />
			</>
		)
	}
	{
		entry.data.type === 'integration' && (
			<>
				<h2>{t('integrations.more')}</h2>
				<IntegrationsNav />
			</>
		)
	}
	{
		entry.data.type === 'migration' && (
			<>
				<h2>{t('migration.navTitle')}</h2>
				<MigrationGuidesNav minimal={true} />
			</>
		)
	}
	<span id="docsearch-lvl0" hidden>{getPageCategory(Astro.url)}</span>
</div>

<style>
	/* Custom styles for `<details>` element. */
	.sl-markdown-content :global(details:not(.not-content *)) {
		--details-pad-y: 0.75rem;
		--details-pad-x: 1rem;
		--details-border-color: var(--sl-color-asides-text-accent, var(--sl-color-gray-5));

		border-bottom: 1px solid var(--details-border-color);
		padding: var(--details-pad-y) var(--details-pad-x);
	}

	.sl-markdown-content :global(details:not(.not-content *)) {
		--details-pad-y: 0.75rem;
		--details-pad-x: 1rem;
		--details-border-color: var(--sl-color-asides-text-accent, var(--sl-color-gray-5));
		border-bottom: 1px solid var(--details-border-color);
		padding: var(--details-pad-y) var(--details-pad-x);
	}
	.sl-markdown-content :global(details:not(.not-content *) + details) {
		margin-top: 0;
	}
	.sl-markdown-content :global(summary:not(.not-content *)) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: calc(-1 * var(--details-pad-y)) calc(-1 * var(--details-pad-x));
		border: 1px solid transparent;
		padding: var(--details-pad-y) var(--details-pad-x);
		cursor: pointer;
		color: var(--sl-color-white);
	}
	.sl-markdown-content :global(summary:not(.not-content *)::marker),
	.sl-markdown-content :global(summary:not(.not-content *)::-webkit-details-marker) {
		display: none;
	}
	.sl-markdown-content :global(summary:not(.not-content *)::after) {
		content: '';
		width: 1.5rem;
		height: 1.5rem;
		flex-shrink: 0;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z'%3E%3C/path%3E%3C/svg%3E");
		-webkit-mask-size: 100%;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z'%3E%3C/path%3E%3C/svg%3E");
		mask-size: 100%;
		background-color: var(--sl-color-asides-text-accent, currentColor);
		transition: transform 0.2s ease-in-out;
	}
	.sl-markdown-content :global([open] > summary:not(.not-content *)) {
		border-color: var(--details-border-color);
		background-color: var(--sl-color-gray-6);
	}
	:global(.starlight-aside [open] > summary:not(.not-content *)) {
		background-color: var(--sl-color-black);
	}
	.sl-markdown-content :global([open] > summary:not(.not-content *)::after) {
		transform: rotate(90deg);
	}
	.sl-markdown-content :global(details + details > summary:not(.not-content *)) {
		border-top: 0;
	}

	/* Custom styles for heading anchor links. */
	.sl-markdown-content :global(.heading-wrapper) {
		--icon-size: 0.75em;
		--icon-spacing: 0.25em;
		line-height: var(--sl-line-height-headings);
	}

	/* Headings after non-headings have more spacing. */
	.sl-markdown-content
		:global(:not(.heading-wrapper) + :is(.heading-wrapper):not(:where(.not-content *))) {
		margin-top: 1.5em;
	}

	/* Set font-size on wrapper element, so line-height, margins etc. match heading size. */
	.sl-markdown-content :global(.level-h2) {
		font-size: var(--sl-text-h2);
	}
	.sl-markdown-content :global(.level-h3) {
		font-size: var(--sl-text-h3);
	}
	.sl-markdown-content :global(.level-h4) {
		font-size: var(--sl-text-h4);
	}
	.sl-markdown-content :global(.level-h5) {
		font-size: var(--sl-text-h5);
	}

	.sl-markdown-content :global(.heading-wrapper > :first-child) {
		margin-inline-end: calc(var(--icon-size) + var(--icon-spacing));
		display: inline;
	}

	.sl-markdown-content :global(.anchor-link) {
		margin-inline-start: calc(-1 * (var(--icon-size)));
		color: var(--sl-color-gray-3);
	}
	.sl-markdown-content :global(.anchor-link:hover),
	.sl-markdown-content :global(.anchor-link:focus) {
		color: var(--sl-color-text-accent);
	}
	.sl-markdown-content :global(.heading-wrapper svg) {
		display: inline;
		width: var(--icon-size);
	}

	@media (hover: hover) {
		.sl-markdown-content :global(.anchor-link) {
			opacity: 0;
		}
	}
	.sl-markdown-content :global(.heading-wrapper:hover > .anchor-link),
	.sl-markdown-content :global(.anchor-link:focus) {
		opacity: 1;
	}

	/* Float anchor links to the left of headings on larger screens. */
	@media (min-width: 95em) {
		.sl-markdown-content :global(.heading-wrapper) {
			display: flex;
			flex-direction: row-reverse;
			justify-content: flex-end;
			gap: var(--icon-spacing);
			margin-inline-start: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
		}
		.sl-markdown-content :global(.heading-wrapper > :first-child),
		.sl-markdown-content :global(.anchor-link) {
			margin: 0;
		}
	}
</style>
